<template>
  <div class="space-y-3">
    <!-- 通用选择规则 -->
    <div class="bg-blue-50 p-3 rounded-lg border border-blue-200">
      <div class="text-sm text-blue-800">
        每组除了一份文件之外其他所有
      </div>
    </div>

    <!-- 希望保留规则 -->
    <div>
      <h4 class="font-medium text-gray-800 mb-2">希望保留 (按照喜好的顺序)</h4>
      <div class="space-y-2">
        <div v-for="(rule, index) in markingRules" :key="index" class="flex items-center space-x-2">
          <input 
            type="checkbox" 
            v-model="rule.enabled" 
            class="w-4 h-4 text-blue-600 border-gray-300 rounded flex-shrink-0"
          >
          <select v-model="rule.criterion" class="w-32 px-2 py-1 border rounded text-sm flex-shrink-0">
            <option value="max_file_size">最大文件大小</option>
            <option value="min_resolution">最小分辨率</option>
            <option value="max_resolution">最大分辨率</option>
            <option value="min_file_size">最小文件大小</option>
            <option value="earliest_modified">文件修改日期最早</option>
            <option value="earliest_created">文件创建日期最早</option>
            <option value="smallest_file">每组中最小的文件</option>
            <option value="longest_filename">每组中最长文件名</option>
            <option value="longest_path">每组中最长路径名</option>
            <option value="filename_asc">文件名 (正序/空值优先)</option>
            <option value="filename_contains">文件名 (包含)</option>
          </select>
          <input 
            v-if="rule.criterion === 'filename_contains'" 
            v-model="rule.pattern" 
            placeholder="包含文本" 
            class="w-24 px-2 py-1 border rounded text-sm flex-shrink-0"
          >
          <button @click="removeRule(index)" class="px-2 py-1 text-red-500 hover:text-red-700 flex-shrink-0">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>
      </div>
      
      <div class="mt-3 space-y-2">
        <div class="flex space-x-2">
          <button @click="addRule" class="px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded-lg">
            + 添加规则
          </button>
          <button @click="resetRules" class="px-3 py-1.5 bg-gray-500 hover:bg-gray-600 text-white text-sm rounded-lg">
            重置
          </button>
        </div>
        <label class="flex items-center space-x-2">
          <input type="checkbox" v-model="keepSelectedMarks" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
          <span class="text-sm text-gray-700">保留已选择标记不变</span>
        </label>
      </div>
      
      <button @click="applyRules" class="w-full mt-3 px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded-lg">
        应用保留规则
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface MarkingRule {
  enabled: boolean
  criterion: string
  pattern?: string
}

const markingRules = ref<MarkingRule[]>([
  { enabled: true, criterion: 'max_file_size' }
])

const keepSelectedMarks = ref(false)

// 定义emits
const emit = defineEmits<{
  'apply-rules': [data: { rules: MarkingRule[], keepSelectedMarks: boolean }]
}>()

const addRule = () => {
  markingRules.value.push({ enabled: false, criterion: 'earliest_modified' })
}

const removeRule = (index: number) => {
  markingRules.value.splice(index, 1)
}

const resetRules = () => {
  markingRules.value = [{ enabled: true, criterion: 'max_file_size' }]
  keepSelectedMarks.value = false
}

const applyRules = () => {
  // 应用保留规则
  console.log('应用保留规则:', markingRules.value)
  
  // 发出事件通知父组件应用这些规则
  emit('apply-rules', {
    rules: markingRules.value.filter(rule => rule.enabled),
    keepSelectedMarks: keepSelectedMarks.value
  })
}
</script>
